 <!DOCTYPE html>
 <html lang="en">
 <head>
            <meta charset="UTF-8">
            <title>信息查询</title>
            <link href="/layui/css/layui.css" rel="stylesheet">
            <script src="jquery.min.js"></script>
            <script src="/layui/layui.js"></script>
        </head>
        <body>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .demo-login-container{width: 1000px;  }
        </style>
 <script type="text/html" id="toolbarDemo">
            <form class="layui-form layui-row layui-col-space16">
                <div class="demo-login-container" >
                    <div class="layui-input-wrap" style="display: inline-block;width: 200px">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="id"  value="" placeholder="请输入编号" class="layui-input" lay-affix="clear">
                    </div>


                    <div class="layui-input-wrap" style="display: inline-block;width: 200px">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="name"  value="" placeholder="请输入名称" class="layui-input" lay-affix="clear">
                    </div>




                    <div class="layui-input-wrap" style="display: inline-block;width: 200px">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="hiredate"  readonly placeholder="请选择日期" class="layui-input demo-table-search-date">
                    </div>


                    <div class="layui-input-wrap" style="display: inline-block;width: 150px">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-login-qq"></i>
                        </div>
                        <select name="sex"  lay-search>
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>



                    <button class="layui-btn " lay-submit lay-filter="demo-table-search">查询</button>
                    <button class="layui-btn " id="dropdownButton">
                        操作
                        <i class="layui-icon layui-icon-down layui-font-12"></i>
                    </button>

                </div>

            </form>

    </script>

    <table class="layui-hide" id="ID-table-demo-search"></table>
    </body>
<script>
    layui.use(function (){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var dropdown = layui.dropdown;
        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-search',
            url: 'queryAllTeacherByPage', // 此处为静态模拟数据，实际使用时需换成真实接口
            limits:[5,10,15],
            toolbar: '#toolbarDemo',
            cols: [[
                {type: 'checkbox', title: '😊', fixed: true}, // 单选框
                {field:'id', title: '编号', sort: true, fixed: true,align:"center"},
                {field:'name', title: '老师名称',align:"center"},
                {field:'sex', title: '老师性别',align:"center"},
                {field:'salary', title: '老师工资',sort: true,align:"center" },
                {field:'hiredate', title: '入职日期',align:"center"},
                {field:'tel', title: '联系方式',align:"center"},
                {field:'address', title: '家庭住址'}
            ]],
            done:function (){
                var id = this.id;

                //下拉渲染
                dropdown.render({
                    elem: '#dropdownButton',
                    data: [{
                        id: 'add',
                        title: '添加'
                    },{
                        id: 'update',
                        title: '修改'
                    },{
                        id: 'delete',
                        title: '删除'
                    }],
                    click:function (obj){
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch(obj.id){
                            case 'add':
                                layer.open({
                                    title: '添加教师',
                                    type: 2,
                                    area: ['75%','90%'],
                                    content: '/add.html',
                                    skin:"layui-layer-molv",
                                    anim:2

                                });
                                break;
                            case 'update':
                                if(data.length !== 1) return layer.msg('请选择一行');
                                var index = layer.open({
                                    title: '修改老师信息',
                                    type: 2,
                                    area: ['70%','85%'],
                                    content: '/update.html',
                                    skin:"layui-layer-molv",
                                    anim:2,
                                    success:function (dom,index){
                                        var iframeWindow = window['layui-layer-iframe'+ index]
                                        iframeWindow.edite(data);
                                    }
                                });
                                break;
                            case 'delete':
                                if(data.length === 0){
                                    return layer.msg('请选择一行');
                                }




                                var ids = [];
                                for(var i = 0;i<data.length;i++){
                                    var idd = data[i].id;
                                    ids.push(idd)
                                }
                                layer.confirm('您确定要删除<font color="red">'+ids.length+"</font>条记录吗？", {icon: 3}, function(){
                                    $.ajax({
                                        type : 'post',
                                        url : "deleteTeacherByIds",
                                        dataType : 'json',
                                        contentType : 'application/json',
                                        data : JSON.stringify(ids),
                                        success : function (count) { // 返回的RequestResult的json对象
                                            if(count>0){
                                                layer.msg('删除成功...');
                                                table.reload("ID-table-demo-search")
                                            }
                                        },
                                    });
                                }, function(){
                                    layer.msg('取消删除',{icon: 1});
                                });
                                break;
                        }

                    }
                })
            },
            page: true,
            height: 550
        });
        // 日期
        laydate.render({
            elem: '.demo-table-search-date'
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            var field = data.field; // 获得表单字段

            // 执行搜索重载
            table.reload('ID-table-demo-search', {
                where:field,
                done:function (){
                    laydate.render({
                        elem: '.demo-table-search-date'
                    });
                }
            })

            return false; // 阻止默认 form 跳转
        });

    })
</script>

</html>